import { Container, Flex, useColorModeValue } from '@chakra-ui/react';
import { useScroll } from 'ahooks';

import { FC } from 'react';

import { ColorModeToggle } from '@tourfly/theme';

import LanguagePicker from '../LanguagePicker';

import Logo from '@/common/components/Logo';

interface PropTypes {
  brandText?: string;
  variant?: string;
  secondary?: boolean;
  fixed?: boolean;
  onOpen?: any;
  [k: string]: any;
}

const WithSubNavigation: FC<PropTypes> = (props) => {
  const scroll = useScroll(document);
  const { fixed, secondary } = props;

  let navbarFilter = 'none';
  let navbarBackdrop = 'none';
  let navbarShadow = 'none';
  let navbarBg = 'none';
  let navbarBorder = 'transparent';

  if (fixed === true && scroll?.top) {
    navbarShadow = '0px 7px 23px rgba(0, 0, 0, 0.05)';
    navbarBg =
      'linear-gradient(rgba(255, 255, 255, 0) 0% rgba(255, 255, 255, 0.39) @ 100%)';
    navbarBorder = 'rgba(226, 232, 240, 0.3)';
    navbarFilter = 'drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.05))';
    navbarBackdrop = 'blur(42px)';
  }

  if (secondary) {
    navbarBackdrop = 'blur(42px)';
  }

  return (
    <Flex
      position="fixed"
      zIndex="10"
      boxShadow={navbarShadow}
      bg={navbarBg}
      borderColor={navbarBorder}
      filter={navbarFilter}
      backdropFilter={navbarBackdrop}
      transitionDelay="0s, 0s, 0s, 0s"
      transitionDuration=" 0.25s, 0.25s, 0.25s, 0s"
      transition-property="box-shadow, background-color, filter, border"
      transitionTimingFunction="linear, linear, linear, linear"
      align="center"
      justify="center"
      borderRadius="6px"
      minH="75px"
      mx="auto"
      width="100%"
    >
      <Container maxW="full">
        <Flex
          color={useColorModeValue('gray.600', 'white')}
          width="100%"
          h="75px"
          align="center"
          justify="space-between"
        >
          <Flex w={{ base: '5rem', md: '14rem' }}>
            <Logo />
          </Flex>
          <Flex align="center" justify="center" gap="1">
            <LanguagePicker />
            <ColorModeToggle />
          </Flex>
        </Flex>
      </Container>
    </Flex>
  );
};

export default WithSubNavigation;
